<script setup lang="ts">
import {onMounted, ref} from "vue";
import type {AutoFormItem} from "@/interface/auto-form.ts";
import {cloneDeep} from "lodash";
import {Page} from "@/interface/base.ts";
import {
  useCinemaSelectListApi,
  useMovieSelectListApi,
  useMovieSessionAddApi,
  useMovieSessionEditApi,
  usePageMovieSessionApi
} from "@/services/api";
import type {
  MovieSessionReqVO,
  PageMovieSessionReqVO,
  PageMovieSessionRespVO
} from "@/interface/movie-session.ts";
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue";
import AutoForm from "@/components/auto-form/AutoForm.vue";

const dialogVisible = ref(false)
const title = ref("")
const addModel = ref<Record<string, AutoFormItem>>({})
const model = ref<Record<string, AutoFormItem>>({})
const pageMovieSessionReq = ref<PageMovieSessionReqVO>({
  size: 10,
  current: 1
})
const movieSessionTableData = ref<Page<PageMovieSessionRespVO>>({
  list: [],
  total: 0
})
const init = async () =>{
  const {data:movieSelectList} = await useMovieSelectListApi()
  const {data:cinemaSelectList} = await useCinemaSelectListApi()
  addModel.value = {
    movieId: {
      key: "movieId",
      name: "电影",
      value: "",
      itemType: "select",
      placeholder: "请选择电影",
      options: movieSelectList,
      rules: {
        required: true,
        message: '请选择电影',
        trigger: 'blur'
      }
    },
    cinemaType: {
      key: "cinemaType",
      name: "影厅",
      value: "",
      itemType: "select",
      placeholder: "请选择影厅",
      options: cinemaSelectList,
      rules: {
        required: true,
        message: '请选择影厅',
        trigger: 'blur'
      }
    },
    startTime: {
      key: "startTime",
      name: "开场时间",
      value: "",
      itemType: "date",
      placeholder: "请选择开场时间",
      options: {
        type: "datetime",
        valueFormat: "YYYY-MM-DD HH:mm:ss"
      },
      rules: {
        required: true,
        message: '请输入类型',
        trigger: 'blur'
      }
    },
    endTime: {
      key: "endTime",
      name: "结束时间",
      value: "",
      itemType: "date",
      placeholder: "请选择结束时间",
      options: {
        type: "datetime",
        valueFormat: "YYYY-MM-DD HH:mm:ss"
      },
      rules: {
        required: true,
        message: '请输入类型',
        trigger: 'blur'
      }
    }
  }
  model.value = cloneDeep(addModel.value)
}
const loadData = async () => {
  const {data: res} = await usePageMovieSessionApi(pageMovieSessionReq.value)
  movieSessionTableData.value = res

}

/**
 * 根据影厅名称进行搜索
 */
const handleSearch = (): void => {
  loadData()
}
/**
 * 处理影厅添加方法
 */
const handleAdd = (): void => {
  title.value = "新增"
  model.value = {}
  model.value = cloneDeep(addModel.value)
  dialogVisible.value = true
}
/**
 * 处理影厅预览操作
 */
const handleDetail = () => {

}
/**
 * 处理影厅编辑操作操作
 */
const handleEdit = (row: MovieSessionReqVO) => {
  title.value = "编辑"
  model.value.id = {
    key: "id",
    name: "id",
    value: "",
    itemType: 'none'
  }
  Object.keys(model.value).forEach(key => {
    model.value[key].value = row[key]
  })
  dialogVisible.value = true
}
const handleSizeChange = () => {
  pageMovieSessionReq.value.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageMovieSessionReq.value.current = val
  loadData()
}
const onSubmit = async (data: MovieSessionReqVO) => {
  if (data.id) {
    await useMovieSessionEditApi(data)
    await loadData()
  } else {
    await useMovieSessionAddApi(data)
    await loadData()
  }
  dialogVisible.value = false
}
const onCancel = () => {
  dialogVisible.value = false
}
onMounted(async () => {
  await init()
  await loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageMovieSessionReq" class="demo-form-inline">
        <el-form-item label="片名">
          <el-input v-model="pageMovieSessionReq.movieName" placeholder="请输入片名" clearable/>
        </el-form-item>
        <el-form-item label="开场时间">
          <el-date-picker
              v-model="pageMovieSessionReq.startTime"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="开场时间"
              clearable
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="pageMovieSessionReq.endTime"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="结束时间"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="movieSessionTableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="60"/>
        <el-table-column prop="movieName" label="片名" width="180"/>
        <el-table-column prop="cinemaName" label="影厅名" width="180"/>
        <el-table-column prop="startTime" label="开场时间" width="180"/>
        <el-table-column prop="endTime" label="结束时间" width="180"/>
        <el-table-column fixed="right" label="操作" width="180">
          <template #header>
            <el-button link type="primary" size="large" @click="handleAdd">
              新增
            </el-button>
          </template>
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageMovieSessionReq.current"
          v-model:page-size="pageMovieSessionReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="movieSessionTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <auto-form :title="title" :dialog-visible="dialogVisible" :model="model" @onSubmit="onSubmit"
               @onCancel="onCancel"></auto-form>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}
</style>